﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../../src/test.css" rel="stylesheet" />
	<script src="../../../vendor/js/jquery.js"></script>
	<script src="../../../dist/js/ud2.js"></script>
</head>
<body>
	
	<h3>对话框控件</h3>

	<fieldset>
		<legend>样式</legend>
		<div>

			<h5>默认</h5>
			<button class="btn a">默认对话框</button>

			<hr class="hr hr-dotted" />

			<h5>位置</h5>
			<button class="btn b">居中</button>
			<button class="btn c">全屏</button>
			<button class="btn d">左上</button>
			<button class="btn e">左下</button>
			<button class="btn f">右上</button>
			<button class="btn g">右下</button>

			<hr class="hr hr-dotted" />

			<h5>大小</h5>
			<button class="btn h">400x300</button>
			<button class="btn i">500x400</button>
			<button class="btn j">600x500</button>

			<hr class="hr hr-dotted" />

			<h5>内置功能对话框</h5>
			<button class="btn k">alert对话框</button>
			<button class="btn l">alert信息对话框</button>
			<button class="btn m">alert警告对话框</button>
			<button class="btn n">alert成功对话框</button> 
			<button class="btn o">alert危险对话框</button> 
			<button class="btn p">alert自定义图标对话框</button> 
			<button class="btn q">confirm对话框</button> 
			<button class="btn r">prompt对话框</button> 

			<hr class="hr hr-dotted" />

			<h5>iframe对话框</h5>
			<button class="btn s">iframe对话框</button>

			<hr class="hr hr-dotted" />

			<h5>自定义按钮对话框</h5>
			<button class="btn t">自定义按钮对话框</button>
		</div>
	</fieldset>

	<script>
		ud2.ready(function () {
			ud2.event('.a').setTap(function () {
				var a = ud2.dialog({
					title: "默认对话框",
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个默认的对话框</div>"
				}).setClose(function(){
					a.remove();
				}).open();
			});

			ud2.event('.b').setTap(function () {
				var a = ud2.dialog({
					title: "居中对话框",
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个居中的对话框</div>"
				}).setClose(function () {
					a.remove();
				}).open();
			});
			ud2.event('.c').setTap(function () {
				var a = ud2.dialog({
					title: "全屏对话框",
					position: "full-screen",
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个全屏的对话框</div>"
				}).setClose(function () {
					a.remove();
				}).open();
			});
			ud2.event('.d').setTap(function () {
				var a = ud2.dialog({
					title: "左上角对话框",
					position: "top-left",
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个左上角的对话框</div>"
				}).setClose(function () {
					a.remove();
				}).open();
			});
			ud2.event('.e').setTap(function () {
				var a = ud2.dialog({
					title: "左下角对话框",
					position: "bottom-left",
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个左下角的对话框</div>"
				}).setClose(function () {
					a.remove();
				}).open();
			});
			ud2.event('.f').setTap(function () {
				var a = ud2.dialog({
					title: "右上角对话框",
					position: "top-right",
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个右上角的对话框</div>"
				}).setClose(function () {
					a.remove();
				}).open();
			});
			ud2.event('.g').setTap(function () {
				var a = ud2.dialog({
					title: "右下角对话框",
					position: "bottom-right",
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个右下角的对话框</div>"
				}).setClose(function () {
					a.remove();
				}).open();
			});

			ud2.event('.h').setTap(function () {
				var a = ud2.dialog({
					title: "400x300对话框",
					size: [400, 300],
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个400x300的对话框</div>"
				}).setClose(function () {
					a.remove();
				}).open();
			});
			ud2.event('.i').setTap(function () {
				var a = ud2.dialog({
					title: "500x400对话框",
					size: [500, 400],
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个500x400的对话框</div>"
				}).setClose(function () {
					a.remove();
				}).open();
			});
			ud2.event('.j').setTap(function () {
				var a = ud2.dialog({
					title: "600x500对话框",
					size: [600, 500],
					content: "<div style='height: 100%; line-height: 16; text-align: center;'>这是一个600x500的对话框</div>"
				}).setClose(function () {
					a.remove();
				}).open();
			});

			ud2.event('.k').setTap(function () {
				ud2.dialog.alert("这是一个弹出框", "这是一个弹出框");
			});
			ud2.event('.l').setTap(function () {
				ud2.dialog.alert("这是一个alert信息对话框", "这是一个alert信息对话框", ud2.style.info);
			});
			ud2.event('.m').setTap(function () {
				ud2.dialog.alert("这是一个alert警告对话框", "这是一个alert警告对话框", ud2.style.warning);
			});
			ud2.event('.n').setTap(function () {
				ud2.dialog.alert("这是一个alert成功对话框", "这是一个alert成功对话框", ud2.style.success);
			});
			ud2.event('.o').setTap(function () {
				ud2.dialog.alert("这是一个alert危险对话框", "这是一个alert危险对话框", ud2.style.danger);
			});
			ud2.event('.p').setTap(function () {
				ud2.dialog.alert("这是一个自定义图标对话框", "这是一个自定义图标对话框", "\uea01", ud2.style.info, function () {
					ud2.dialog.alert("这是一个自定义图标对话框", "这是一个自定义图标对话框", "\ueb01", ud2.style.warning, function () {
						ud2.dialog.alert("这是一个自定义图标对话框", "这是一个自定义图标对话框", "\uec01", ud2.style.success, function () {
							ud2.dialog.alert("这是一个自定义图标对话框", "这是一个自定义图标对话框", "\ued01", ud2.style.danger);
						});
					});
				});
			});
			ud2.event('.q').setTap(function () {
				ud2.dialog.confirm("这是一个confirm对话框", "这是一个confirm对话框", function () {
					ud2.dialog.alert("操作提示", "您点击了确定", ud2.style.success);
				}, function () {
					ud2.dialog.alert("操作提示", "您点击了取消", ud2.style.danger);
				});
			});
			ud2.event('.r').setTap(function () {
				ud2.dialog.prompt("这是一个prompt对话框", "这是一个prompt对话框", function (val) {
					ud2.dialog.alert("prompt的值", val)
				});
			});

			ud2.event('.s').setTap(function () {
				var a = ud2.dialog({
					title: '这是一个iframe对话框',
					content: 'dialog.html',
					contentType: ud2.dialog.contentType.url
				}).setClose(function () {
					a.remove();
				}).open();
			});

			ud2.event('.t').setTap(function () {
				ud2.dialog({
					title: '这是一个自定义按钮对话框',
					content: '<div style="padding: 20px;">这是默认的内容</div>',
					contentType: ud2.dialog.contentType.html,
					footer: [
						{
							text: 'danger', tap: function () {
								ud2.dialog.alert('自定义按钮', '这是一个自定义按钮触发执行的alert', ud2.style.danger);
							},
							class: 'danger'
						},
						{
							text: 'success', tap: function () {
								ud2.dialog.alert('自定义按钮', '这是一个自定义按钮触发执行的alert', ud2.style.success);
							},
							class: 'success'
						}
					]
				}).setClose(function () {
					this.remove();
				}).open();
			});
		});
	</script>

</body>
</html>
